<template>
	<button
		:class="{loading:loading }"
		:disabled="loading"
		:style="{width: button_width}"
		class="v-com-Button m-button">
		<!-- <i
			v-show="loading"
			class="icon"/>  -->
		<slot/>
	</button>
</template>

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .v-com-Button.m-button{
		// width: 400* @rem-per-px;
		// padding: 0 104* @rem-per-px;
        height: 60* @rem-per-px;
		// background: #C794FC;
	    background:linear-gradient(90deg,rgba(255,174,204,1) 80%,rgba(255,242,199,1) 110%);;
        display: inline-block;
        border-radius:  30 * @rem-per-px;
        text-align: center;
		color: #ffffff;
		font-size: 24 * @rem-per-px;
		// line-height: 50* @rem-per-px;
		border: 0;
		line-height: normal;
	}
	.v-com-Button.m-button:focus{
		outline: none;
	}
	.v-com-Button.m-button:hover{
		background: rgba(255,212,228,1);
	}
	.v-com-Button.m-button.loading{
		// background: rgba(199, 148, 252, .8);
		// background:linear-gradient(155deg,rgba(255,174,204,1) 20%,rgba(255,242,199,1) 100%);  //255,242,199,1
	    background: linear-gradient(203deg, #fff2c7 -28%, #ffaecc 40%);
		box-shadow:0px 4px 8px rgba(255,212,228,1);
	}
	.v-com-Button.m-button {
		.icon{
			display: inline-block;
			width: 20 * @rem-per-px;
			height: 20* @rem-per-px;
			background: #ffffff;
		}
	}
</style>

<script>
export default {
	name: 'MButton',
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		width: {
			type: [Number, String],
			default() {
				return '80%';
			},
		},
	},
	data() {
		return {
			button_width: null,
		};
	},
	created() {
		this.button_width = this.width;
	},
	methods: {},
};
</script>
